<template>
  <view class="home-container">
    <!-- 搜索框 -->
    <view class="home-header-search">
      <u-input placeholder=" " border="surround" shape="circle" v-model="searchValue" @change="inputChange">
        <template slot="prefix">
          <u-icon name="search" size="20" @click="cameraClick"></u-icon>
        </template>
        <template slot="suffix">
          <view class="search-suffix">
            <u-icon name="camera-fill" size="25" @click="cameraClick"></u-icon>
            <view style="width: 40rpx"> </view>
            <u-button @tap="getCode" text="搜索" type="success" size="small" shape="circle"></u-button>
          </view>
        </template>
      </u-input>
    </view>
    <view class="home-container-u-tabs">
      <u-tabs :list="tabsList" :activeStyle="{
        color: '#303133',
        fontWeight: 'bold',
        transform: 'scale(1.05)',
      }" :inactiveStyle="{
  color: '#606266',
  transform: 'scale(1)',
}" @click="clickTabs"></u-tabs>
    </view>
    <view class="home-container-item">
      <u-swiper :list="swiperList" indicator circular height="300rpx" indicatorMode="dot" :current="0"></u-swiper>
      <view class="home-container-item-horizontal">
        <!-- 横向面板 -->
        <horizontalScroll ref="uTabs"></horizontalScroll>
      </view>
      <view class="home-container-item-column">
        <view class="home-container-item-column-left">
          <swiper class="home-container-item-column-left-swiper" vertical circular autoplay>
            <swiper-item v-for="(item, i) in swiperColumnList" :key="i" class="" item-id="">
              <image class="home-container-item-column-left-swiper-image" :src="item.avatar" mode="scaleToFill"
                @click="clickContainerSwiperImage">
              </image>
            </swiper-item>
          </swiper>
        </view>
        <view class="home-container-item-column-right">
          <view class="home-container-item-column-right-title">{{
            homeContainerItemRightTitle
          }}</view>
          <view class="home-container-item-column-right-text">{{
            homeContainerItemRightText
          }}</view>
        </view>
      </view>
      <!-- 百度热搜 -->
      <scroll-view class="scroll-view-hot" @scroll="scroll" scroll-x="true" :scroll-left="scroll_left"
        scroll-with-animation>
        <view v-for="(item, i) of hotSearchList" :key="i" :id="'demo' + i" class="scroll-view-hot-item"
          @click="clickHotSearch(item)">
          <view class="scroll-view-hot-item-title">{{ item.title }} </view>
          <view class="scroll-view-hot-item-text">{{ item.desc }} </view>
          <image class="scroll-view-hot-item-image" mode="" :src="item.pic"></image>
        </view>
      </scroll-view>
      <!-- 列表内容 -->
      <view class="list-container">
        <view v-for="(item, i) of listContent" :key="i" class="list-container-item">
          <view>
            <image class="list-container-item-img" :src="item.avatar" mode="widthFix"></image>
          </view>
          <view class="list-container-item-right">
            <view class="list-container-item-right-title">
              {{ item.title }}
            </view>
            <view class="list-container-item-right-text">
              {{ item.concent }}
            </view>
          </view>
        </view>
        <u-loading-icon text="加载中..." :show="isLoading"></u-loading-icon>
      </view>
    </view>
    <u-modal title="利剑出鞘,一统江湖" :show="modal.show" closeOnClickOverlay @confirm="() => (modal.show = false)">
      <image style="width: 100%; height: 300rpx" :src="modal.src"></image>
    </u-modal>
  </view>
</template>

<script>
import {
  getBannerList,
  getJoke,
  getAvatar,
  getHotlist,
} from "@/api/index/index";
import { urlParse } from "@/utils/tools";
import horizontalScroll from "@/components/horizontalScroll";
export default {
  components: {
    horizontalScroll,
  },
  data() {
    return {
      searchValue: "",
      searchList: ["电饭锅", "衣服", "电脑", "手机", "电视"],
      tabsList: [
        {
          name: "首页",
          id: 1,
        },
        {
          name: "热门",
          id: 2,
        },
        {
          name: "最新",
          id: 3,
        },
        {
          name: "电影",
          id: 4,
        },
        {
          name: "音乐",
          id: 5,
        },
        {
          name: "小说",
          id: 6,
        },
        {
          name: "美食",
          id: 7,
        },
        {
          name: "文化",
          id: 8,
        },
        {
          name: "财经",
          id: 9,
        },
        {
          name: "手工",
          id: 10,
        },
      ],
      swiperColumnList: [],
      homeContainerItemRightTitle: "",
      homeContainerItemRightText: "",
      showImage: true,
      modal: {
        show: false,
        src: "",
      },

      scroll_left: 0,
      old_scroll_left: 0,
      src: "",
      swiperList: [],
      typeList: [],
      listContent: [],
      hotSearchList: [],
      isLoading: false,
    };
  },
  onload() {
    uni.$u.mpShare.title = "天苍苍野茫茫，风吹草低见牛羊";
  },
  onShareAppMessage(res) {
    return {
      title: "分享到聊天及群聊",
      path: "page/index/index",
    };
  },
  onShareTimeline(res) {
    if (res.from === "button") {
      // 来自页面内分享按钮
      console.log(res.target);
    }
    return {
      title: "分享到朋友圈",
      path: "page/index/index",
    };
  },
  onLaunch() { },
  onShow() { },
  //触底加载
  onReachBottom() {
    if (this.isLoading) return;
    this.getListData();
  },

  mounted() {
    this.getBannerList();
    this.getTypeListData();
    this.getListData();
    this.getHotlist();
  },
  methods: {
    clickTabs(item) {
      this.getListData("restData"); //清空数据
      this.getBannerList("restData");
      this.getTabsData();
    },
    getCode() {
      this.$refs.uCode.getCode();
    },
    inputChange(e) {
      console.log(e);
    },
    async getTabsData() {
      var arr = [];
      for (let i = 0; i <= 16; i++) {
        const { avatar } = await getAvatar({ type: "json" });
        arr.push({ icon: avatar });
      }
      this.$refs.uTabs.setList(arr);
    },
    async getHotlist() {
      const { data } = await getHotlist({ type: "baiduRD" });
      this.hotSearchList = data.splice(0, 10);
      // console.log(this.hotSearchList);
    },
    async getListData(mark) {
      if (mark == "restData") this.listContent = [];
      if (this.isLoading == false) {
        this.isLoading = true;
      }
      for (var i = 0; i < 10; i++) {
        const { avatar } = await getAvatar({ type: "json" });
        const {
          data: { vhan, source },
        } = await getJoke({ type: "json" });
        this.listContent.push({
          avatar,
          concent: vhan,
          title: source,
        });
        if (i == 0) {
          this.homeContainerItemRightTitle = source;
          this.homeContainerItemRightText = vhan;
        }
      }
      this.isLoading = false;
    },
    async getTypeListData() {
      for (let i = 0; i < 3; i++) {
        const { avatar } = await getAvatar({ type: "json" });
        this.typeList.push(avatar);
        this.swiperColumnList.push({ avatar });
      }
    },
    async getBannerList(mark) {
      //截取数组最后一位
      if (mark == "restData") this.swiperList = [];
      for (let i = 0; i < 6; i++) {
        const { imgurl } = await getBannerList({ type: "json" });
        this.swiperList.push(imgurl);
      }
    },
    scroll(e) {
      this.old_scroll_left = e.detail.scrollLeft;
    },
    setScrollLeft() {
      this.scroll_left = this.old_scroll_left;
      this.$nextTick(() => {
        this.scroll_left = 0;
      });
    },
    clickHotSearch(item) {
      var url =
        "/subIndexPages/index/hotWebView" +
        "?url=" +
        item.mobilUrl.split("?")[0];
      //把url查询字符串转换为对象
      var obj = urlParse(item.mobilUrl);
      for (var key in obj) {
        url += `&${key}=${obj[key]}`;
      }
      uni.navigateTo({
        url,
      });
    },
    clickContainerSwiperImage() {
      //模态框提醒,功能待开发
      // uni.showToast({
      //   title: "功能待开发",
      //   icon: "none",
      // });
    },
    cameraClick() {
      //底部弹出菜单
      uni.showActionSheet({
        itemList: ["拍照", "从相册选择"],
        success: (res) => {
          if (res.tapIndex == 0) {
            //拍照
            uni.chooseMedia({
              count: 1,
              sourceType: ["camera"],
              success: (res) => {
                this.modal.show = true;
                this.modal.src = res.tempFiles[0].tempFilePath;
              },
            });
          } else if (res.tapIndex == 1) {
            //从相册选择
            uni.chooseMedia({
              count: 9,
              sourceType: ["album"],
              success: (res) => {
                this.modal.show = true;
                this.modal.src = res.tempFiles[0].tempFilePath;
                // var urls = [];
                // res.tempFiles.forEach((item) => {
                //   urls.push(item.tempFilePath);
                // });
                // uni.previewImage({
                //   urls,
                //   current: urls[0],
                //   longPressActions: {
                //     itemList: ["发送给朋友", "保存图片", "收藏", "投诉"],
                //     success: function (data) {
                //       console.log("选中了第" + (data.tapIndex + 1) + "个按钮");
                //     },
                //   },
                // });
              },
            });
          }
        },
      });
    },
  },
};
</script>
<style lang="scss">
.home-container {
  &-item {
    padding: 15rpx;

    &-horizontal {
      background: #fff;
      margin: 15rpx 0;
      border-radius: 15rpx;
    }

    &-column {
      display: flex;
      margin-top: 15rpx;

      &-left {
        flex: 1;
        background: #fff;
        margin-right: 15rpx;
        border-radius: 15rpx;
        height: 300rpx;

        &-swiper {
          padding: 15rpx;
          box-sizing: border-box;
          height: 100%;
        }
      }

      &-right {
        flex: 1;
        background: #fff;
        border-radius: 15rpx;
        height: 300rpx;
        padding: 15rpx;
        box-sizing: border-box;

        &-title {
          font-size: 32rpx;
          color: #333;
          margin-bottom: 15rpx;
          text-align: center;
        }

        &-text {
          font-size: 28rpx;
          color: #666;
        }
      }
    }
  }

  &-u-tabs {
    background: #fff;
  }
}

.home-header-search {
  background: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
  padding: 15rpx;
  box-sizing: border-box;

  .search-suffix {
    display: flex;
  }

  .u-input {
    border: none;
    background: #eceaea;
  }
}

.scroll-view-hot {
  width: 100%;
  height: 520rpx;
  white-space: nowrap;
  background: #fff;
  margin: 15rpx 0;
  border-radius: 15rpx;

  &-item {
    display: inline-block;
    width: 100%;
    height: 100%;
    padding: 15rpx;
    box-sizing: border-box;

    &-title {
      font-size: 32rpx;
      color: #333;
      margin-bottom: 15rpx;
      text-align: center;
    }

    &-text {
      font-size: 28rpx;
      color: #666;
      white-space: normal;
      // 超过两行显示省略号
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }

    &-image {
      width: 100%;
      height: 350rpx;
      padding: 15rpx 0;
    }
  }
}

.list-container {
  &-item {
    display: flex;
    padding: 15rpx;
    box-sizing: border-box;
    background: #fff;
    margin-bottom: 15rpx;
    border-radius: 15rpx;

    &-img {
      width: 200rpx;
      height: 200rpx;
      margin-right: 15rpx;
    }

    &-right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;

      &-title {
        font-size: 32rpx;
        color: #333;
        margin-bottom: 15rpx;
      }

      &-text {
        font-size: 28rpx;
        color: #666;
      }
    }
  }
}
</style>
